@import '../../assets/css/reset.css';
@import '../../assets/css/common.css';
@import '../../assets/css/property.css';
// 网页头部
.head{
    user-select: none;
    // position: static; /* 静态定位: 就是没有定位 */
    li{
        margin: 0 20px;
        cursor: pointer;
        a{
            color: #666;
        }
        .a1{
            color: #00bdff;
        }
    }
    .li1{
        font-size: 16px;
    }
    // 激活效果
    .active{
        // 父级相对定位
        position: relative;
    }
    // 设置伪元素实现激活效果
    .active::after{
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: #00bdff;
        // 子级绝对定位
        position: absolute;
        top: 41px;
    }
    // 登录按钮样式设置
    .loginBtn{
        color: #666;
    }
}

// h5粒子效果
.h5canvas{
    position: relative;
    height: 483px;
    background-color: #f1f1f1;
    //banner蒙层设置
    .banner-mask{
        width: 100%;
        height: 418px;
        background-color: rgba(0, 0, 0, 0);
        position: absolute;
        top: 65px;
        // 蒙层主要内容
        .mask-content{
            height: 270px;
            user-select: none;
            margin-top: 106px;
            // 左边图片
            .img-desc{
                width: 260px;
                height: 270px;
                background-color: #fff;
                margin-right: 56px;
                padding-top: 54px;
                box-sizing: border-box;
                .img-box{
                    text-align: center;
                }
                .img-desc-cont{
                    width: 260px;
                    height: 50px;
                    text-align: center;
                    margin-top: 42px;
                    li{
                        width: 50px;
                        height: 50px;
                        line-height: 24px;
                        margin-left: 25px;
                        color: #c6c6c6;
                    }
                }
            }
            // 右边身份认证
            .api-info{
                width: 600px;
                height: 270px;
                // 身份证认证标题
                .api-info-title{
                    font-size: 16px;
                    line-height: 40px;
                    span{
                        border: 1px solid #00bdff;
                        font-size: 12px;
                        height: 22px;
                        line-height: 22px;
                        text-align: center;
                        color: #00bdff;
                        margin-top: 4px;
                    }
                    .span1{
                        width: 74px;
                        margin-left: 14px;
                    }
                    .span2{
                        width: 60px;
                        margin-left: 10px;
                    }
                }
                .api-info-user{
                    width: 100%;
                    height: 22px;
                    li{
                        color: #f8aa39;
                        line-height: 22px;
                        margin-right: 36px;
                        img{
                            margin-right: 7px;
                        }
                    }
                }
                .api-info-text{
                    line-height: 26px;
                    margin-top: 6px;
                    margin-bottom: 6px;
                }
                .price{
                    position: relative;
                    .first{
                        font-size: 12px;
                        text-align: center;
                        line-height: 26px;
                        height: 26px;
                        border: 1px solid deepskyblue;
                        color: deepskyblue;
                        width: 98px;
                        margin-left: 0px;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        cursor: pointer;
                        .qrcode-box{
                            position: absolute;
                            top: 30px;
                            left: -1px;
                            height: 0px;
                            overflow: hidden;
                            transition: all 1s;
                            img{
                                width: 120px;
                            }
                            span{
                                color: #666;
                            }
                        }
                    }

                    .pricelist{
                        margin-left: 106px;
                        li{
                            width: 65px;
                            line-height: 26px;
                            font-size: 12px;
                            text-align: center;
                            margin: 0px 6px;
                            cursor: pointer;
                            border: 1px solid #ccc;
                        }
                    
                        .active{
                            border-color:  deepskyblue;
                            color: deepskyblue;
                            background: url('../../assets/imgs/select.png') no-repeat right bottom;
                        }
                    }
                    .price-box{
                        margin-top: 18px;
                        p{
                            font-size: 12px;
                            display: none;
                            .red{
                                color: red;
                            }
                        }
                        .on{
                            display: block;
                        }
                    }
                }
                .btn{
                    margin-top: 14px;
                    button{
                        width: 120px;
                        height: 40px;
                        background: #00bdff;
                        font-size: 16px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}

// api详情页的内容区的设置
.api-content{
    user-select: none;
.tab-top{
    height: 46px;
    border-bottom: 1px solid #f4f4f4;
    li{
        height: 45px;
        line-height: 45px;
        margin-right: 110px;
        font-size: 16px;
        color: #666;
        cursor: pointer;
        position: relative;
    }
    .active{
        color: #00bdff;
        &::before{
            content: "";
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 3px;
            background-color: #00bdff
        }
    }
}
//选项卡内容区
.tab-content{
    padding-top: 30px;
    .tabCont{
        width: 920px;
            line-height: 35px;
            color: #555;
            .tabCont-item{
                display: none;
            }
            .current {
                display: block;
            }
            .tabCont-item{
            .p1{
                font-size: 12px;
                span{
                    color: #777;
                }
                    a{
                        display: inline-block;
                        width: 150px;
                        height: 34px;
                        line-height: 35px;
                        color: #fff;
                        text-align: center;
                        background-color: #00bdff;
                        margin-top: 10px;
                    }
            }
                //表格
                .apiTable-box{
                    margin-top: 20px;
                    margin-bottom: 50px;
                    .title-cont{
                        position: relative;
                        height: 16px;
                        line-height: 16px;
                        color: #555;
                        padding-left: 14px;
                        margin-bottom: 18px;
                        &::before{
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 4px;
                            height: 16px;
                            border-radius: 2px;
                            background-color: #00BDFF;
                        }
                    }
                    .title-cont{
                        font-size: 14px;
                        color: #555;
                    }
                    .api-table{
                        width: 100%;
                        border: 0;
                        border-collapse: collapse;
                        line-height: 32px;
                        font-size: 12px;
                        border: 1px solid #e7e7e7;
                        th{
                            color: #999;
                            text-align: left;
                            background-color: #fbfbfb;
                            border-bottom: 1px solid #e7e7e7;
                        }
                        td{
                            color: #666;
                            background-color: #fff;
                            border-bottom: 1px solid #e7e7e7;
                        }
                    }
                    a{
                        background: #1271ef;
                        font-weight: normal;
                        border-radius: 6px;
                        color: #fff;
                        padding: 5px 12px;
                    }
                    .json-code{
                        font-size: 12px;
                        padding: 20px;
                        line-height: 20px;
                        background-color: #fafafa;
                    }
                }
            }  
        }
        // 右边栏盒子
        .tab-right{
            width: 200px;
            min-height: 600px;
            .activity{
                h3{
                    margin-bottom: 11px;
                    color: #999;
                }
                li{
                    margin-bottom: 10px;
                }
            }
            .like{
                h3{
                    margin-top: 20px;
                    margin-bottom: 11px;
                    color: #999; 
                }
                .recommend{
                    li{
                        width: 220px;
                        height: 76px;
                        border-bottom: 1px solid #eee;
                        margin-bottom: 15px;
                        position: relative;
                        .a4{
                            display: inline-block;
                            width: 60px;
                            height: 60px;
                            border: 1px solid #eee;
                            text-align: center;
                            line-height: 60px;
                        }
                        p{
                            width: 144px;
                            height: 76px;
                            position: absolute;
                            top: 0px;
                            left: 74px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            a{
                                color: #555;
                                font-size: 16px;
                                line-height: 30px;
                            }
                            span{
                                font-size: 12px;
                                width: 150px;
                                line-height: 22px;
                                
                                
                                color: #999;
                            }
                        }
                    }
                }
            }
        }
    }
}

// 免费注册
.free{
    width: 100%;
    height: 150px;
    background:  url(../../assets/imgs/bottombg2.png);
    text-align: center;
   .register{
       width: 100%;
       color: #fff;
       padding-top: 28px;
       box-sizing: border-box;
       h2{
            font-size: 28px;
            margin-bottom: 22px;
       }
       a{
            display: inline-block;
            width: 150px;
            height: 40px;
            font-size: 16px;
            line-height: 40px;
            color: #fff;
            border: 1px solid #fff;
       }
   }
}
